<template>
  <div class="app-container commercial-content">
    <EzForm
      ref="menuForm"
      :formMap="formMap"
      v-model="formData"
      @search="searchRequest"
    ></EzForm>
    <BtnGroup ref="btnGroup" :btns="btns" @handle="handleBtnGroup" />
    <!-- 工具栏 end-->

    <div>
      <el-table
        v-loading="loading"
        ref="table"
        :key="randomKey"
        :data="lists"
        :height="st"
        lazy
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column label="ID" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户ID" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.user_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="充值方式" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.payment_type_label }}</span>
          </template>
        </el-table-column>
        <el-table-column label="充值金额" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.amout }}</span>
          </template>
        </el-table-column>
        <el-table-column label="账户金额" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.score }}</span>
          </template>
        </el-table-column>
        <el-table-column label="充值支付凭证" >
          <template slot-scope="scope">
            <span v-if="scope.row.payment_content_is_img === true"><a target="_blank" :href="scope.row.payment_content"><img style="max-height:100px;" :src="scope.row.payment_content" /></a></span>          
            <span v-else>{{ scope.row.payment_content }}</span>
          </template>
        </el-table-column>
        <el-table-column label="充值时间" width="200" prop="created_at">
          <template slot-scope="scope">{{
            scope.row.created_at | dateJudge
          }}</template>
        </el-table-column>
        <el-table-column label="充值状态" width="200" prop="created_at">
          <template slot-scope="scope">{{
            scope.row.recharge_state_label
          }}</template>
        </el-table-column>
        <el-table-column label="备注" width="200" prop="created_at">
          <template slot-scope="scope">{{
            scope.row.remark
          }}</template>
        </el-table-column>
        <el-table-column label="操作人员" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.created_by }}</span>
          </template>
        </el-table-column>
        
        
        <el-table-column label="操作" width="210" fixed="right">
          <template slot-scope="scope">
            
            <el-button size="small" type="primary" @click="handleRechargeConfirm(scope.row)"   
            v-if="scope.row.recharge_state === 'INPROGRESS'"         
            v-auth="'/admin/recharge/confirm'"
              >确认到账
            </el-button>
            
            <el-button size="small" type="danger" @click="handleRechargeCancel(scope.row)"   
            v-if="scope.row.recharge_state === 'INPROGRESS'"         
            v-auth="'/admin/recharge/cancel'"
              >取消充值
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        ref="paginationTotal"
        :page="currentPage"
        :total="total"
        :size="pageSize"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
      />
    </div>

<!--支付 弹框-->
<el-dialog
  class="add-dialog"
  :visible.sync="dialogVisible"
  :title="dialogTitle"
  :before-close="modalClose"
  :close-on-press-escape="false"
  append-to-body
>
  <div v-loading="dialogloading">
    <el-form
      ref="manuForm"
      :model="rechargeForm"
      label-width="180px"
      size="small"
      :rules="rules"
    >

    <el-form-item label="用户ID" prop="user_id" :rules="$rule.required">
      <el-input
        v-model="rechargeForm.user_id"
        size="small"
        placeholder="请输入用户ID"
        clearable
        maxlength="7"
      ></el-input>
    </el-form-item>

    <el-form-item label="用户名" prop="username" :rules="$rule.required">
      <el-input
        v-model="rechargeForm.username"
        size="small"
        placeholder="请输入用户名"
        clearable
        maxlength="100"
      ></el-input>
    </el-form-item>

    <el-form-item prop="payment_type" label="充值方式：" :rules="$rule.required" align="left">
        <template v-for="(item, index) in dictList.payment_type">
          <el-radio v-model="rechargeForm.payment_type" :label="item.value">{{ item.label }}</el-radio>
        </template>
    </el-form-item>
    <el-form-item label="充值金额" prop="amout" :rules="$rule.required">
      <el-input
        v-model="rechargeForm.amout"
        size="small"
        placeholder="请输入充值金额"
        clearable
        maxlength="7"
      ></el-input>
    </el-form-item>
    <el-form-item label="增加账户金额" prop="score" :rules="$rule.required">
      <el-input
        v-model="rechargeForm.score"
        size="small"
        placeholder="请输入增加账户金额"
        clearable
        maxlength="7"
      ></el-input>
    </el-form-item>
    <el-form-item label="充值支付凭证" prop="payment_content" :rules="$rule.required">
      <el-input
        v-model="rechargeForm.payment_content"
        size="small"
        placeholder="请输入充值支付凭证"
        clearable
        maxlength="100"
      ></el-input>
    </el-form-item>         

    </el-form>
    <div class="tool2" style="margin-top: 45px">
      <el-button type="primary" size="medium" @click="handleChargeSubmit"
        >确定</el-button
      >
      <el-button size="medium" @click="modalClose">取消</el-button>
    </div>
  
  </div>
</el-dialog>

<!--确认到账 弹框-->
<el-dialog
  class="add-dialog"
  :visible.sync="dialogConfirmVisible"
  :title="dialogTitle"
  :before-close="modalClose"
  :close-on-press-escape="false"
  append-to-body
>
  <div v-loading="dialogloading">
    <el-form
      ref="manuForm"
      :model="rechargeConfirmForm"
      label-width="180px"
      size="small"
      :rules="rules"
    >

    <el-form-item label="充值方式" prop="payment_type" >
      <el-input
        v-model="rechargeConfirmForm.payment_type"
        size="small"
        disabled
        clearable
        maxlength="7"
      ></el-input>
    </el-form-item>

    <el-form-item label="充值金额" prop="amout" >
      <el-input
        v-model="rechargeConfirmForm.amout"
        size="small"
        disabled
        clearable
        maxlength="7"
      ></el-input>
    </el-form-item>
    <el-form-item label="增加账户金额" prop="score" :rules="$rule.required">
      <el-input
        v-model="rechargeConfirmForm.score"
        size="small"
        placeholder="请输入增加账户金额"
        clearable
        maxlength="7"
        :readonly="rechargeConfirmForm.payment_type != 'USDT'"        
        :disabled="rechargeConfirmForm.payment_type != 'USDT'"        
      ></el-input>
    </el-form-item>
    <el-form-item label="备注" prop="remark" :rules="$rule.required">
      <el-input
        v-model="rechargeConfirmForm.remark"
        size="small"
        placeholder="请输入备注"
        clearable
        maxlength="100"
      ></el-input>
    </el-form-item>  
    <el-form-item label="密码" prop="password" :rules="$rule.required">
      <el-input
        v-model="rechargeConfirmForm.password"
        size="small"
        placeholder="请输入当前用户登录密码"
        clearable
        type="password"
        maxlength="100"
      ></el-input>
    </el-form-item>         

    </el-form>
    <div class="tool2" style="margin-top: 45px">
      <el-button type="primary" size="medium" @click="handleChargeConfirmSubmit"
        >确定</el-button
      >
      <el-button size="medium" @click="modalClose">取消</el-button>
    </div>
  
  </div>
</el-dialog>

<!--取消充值 弹框-->
<el-dialog
  class="add-dialog"
  :visible.sync="dialogCancelVisible"
  :title="dialogTitle"
  :before-close="modalClose"
  :close-on-press-escape="false"
  append-to-body
>
  <div v-loading="dialogloading">
    <el-form
      ref="manuForm"
      :model="rechargeCancelForm"
      label-width="180px"
      size="small"
      :rules="rules"
    >



    <el-form-item label="充值方式" prop="payment_type" >
      <el-input
        v-model="rechargeCancelForm.payment_type"
        size="small"
        disabled
        clearable
        maxlength="7"
      ></el-input>
    </el-form-item>

    <el-form-item label="充值金额" prop="amout" >
      <el-input
        v-model="rechargeCancelForm.amout"
        size="small"
        disabled
        clearable
        maxlength="7"
      ></el-input>
    </el-form-item>
    <el-form-item label="备注" prop="remark" :rules="$rule.required">
      <el-input
        v-model="rechargeCancelForm.remark"
        size="small"
        placeholder="请输入备注"
        clearable
        maxlength="100"
      ></el-input>
    </el-form-item> 
    <el-form-item label="密码" prop="password" :rules="$rule.required">
      <el-input
        v-model="rechargeCancelForm.password"
        size="small"
        placeholder="请输入当前用户登录密码"
        clearable
        type="password"
        maxlength="100"
      ></el-input>
    </el-form-item>          

    </el-form>
    <div class="tool2" style="margin-top: 45px">
      <el-button type="primary" size="medium" @click="handleChargeCancelSubmit"
        >确定</el-button
      >
      <el-button size="medium" @click="modalClose">取消</el-button>
    </div>
  
  </div>
</el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      randomKey: Math.random(),
      formMap: [
        {
          label: "用户ID",
          key: "user_id",
          type: "input",
        },
        {
          label: "用户名",
          key: "username",
          type: "input",
        },
        {
          label: "充值方式",
          key: "payment_type",
          type: "select",
          options: [],
        },
        {
          label: "充值状态",
          key: "recharge_state",
          type: "select",
          options: [],
        },
        {
          label: "",
          key: "created_at",
          type: "cratedatdate",
        },
      ],
      btns: [
        { title: "新增充值", pos: "right", handle: "new", type: "primary" },
      ],
      formData: {
        id: "", //用户id
        username: "", //用户名
        state: "",//账号状态
        type: "",//用户等级
        created_at: [],
        last_login_time: [],
      },
      rechargeForm: {
        user_id: '',
        username: '',
        amout: '',
        score: '',
        payment_type: '',
        payment_content: '',
      },
      rechargeConfirmForm: {
        id:'',
        user_id: '',
        score: '',
        remark: '',
        payment_type: '',
        amout: '',
        password: ''
      },
      rechargeCancelForm: {
        id:'',
        user_id: '',
        remark: '',
        payment_type: '',
        amout: '',
        password: ''
      },
      lists: [],
      dialogloading: true,
      loading: false,

      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      total: 0,
      // 个数选择器（可修改）
      pageSizes: [50, 100, 200],
      // 默认每页显示的条数（可修改）
      pageSize: 30,

      st: 0,
      dialogVisible: false,
      diaAddress: false,
      dialogConfirmVisible: false,
      dialogCancelVisible: false,
      dialogTitle: "创建",
      isEdit: false,
      choosePlace: [],
      dictList: [],
      place: [],
      country: [],

      // 验证表单
      rules: {
        
      },
    };
  },
  watch: {
    formData: {
      handler(newName, oldName) {

        // ...
      },
      deep: true,
    },
  },
  created() {
    this.handleRequest();
    this.handleDict();
  },
  mounted() {
    const that = this;
    that.$util.autoHeight(that, that.$refs.table.$el);
  },
  methods: {
    alterData(row, column) {
      row.isShow = false;
      this.refreshTable();
    },
    refreshTable() {
      this.randomKey = Math.random();
    },

    /**
     * 头部按钮列表
     */
    handleBtnGroup(evt) {
      let { handle } = evt;
      switch (handle) {
        case "new":
          this.handleCharge();
          break;
        case "search":
          this.handleRequest();
          break;      
        default:
          break;
      }
    },
    
    /**
     * 字典项目
     */
     async handleDict(that) {
      const { result } = await this.$.recharge.dict();
      this.formMap[2].options = result['payment_type'];
      this.formMap[3].options = result['recharge_state'];
      this.dictList = result;
    },
    /**
     * 关闭对话框
     */
    modalClose() {
      this.dialogVisible = false;
      this.diaAddress = false;
      this.dialogConfirmVisible = false;
      this.dialogCancelVisible = false;
    },

    /**
     *  搜索
     */
    handleSearch(statu) {
      this.currentPage = 1;
      this.handleRequest();
    },
    searchRequest() {
      this.currentPage = 1;
      this.handleRequest();
    },
    /**
     * 弹框的行更改
     */
    rowChange(e) {
      console.log(e);
    },
    sizeChange(e) {
      const that = this;
      that.currentPage = 1;
      that.pageSize = e;
      that.handleRequest();
    },
    currentChange(e) {
      this.currentPage = e;
      this.handleRequest();
    },
    /**
     * 请求列表
     */
    async handleRequest() {
      const that = this;

      const {
        currentPage,
        pageSize,
        created_at,

        formData,
      } = that;
      let o = {
        page_size: pageSize,
        page: currentPage,
      };

      o.start_created_at = !!formData.created_at ? formData.created_at[0] : "";
      o.end_created_at = !!formData.created_at ? formData.created_at[1] : "";

      that.$util.ext(that.formData, o);
      console.log("that.formData", that.formData);

      try {
        that.loading = true;
        const { result } = await that.$.recharge.rechargeList(that.formData);
        that.total = result.pagination.total_count;
        that.$refs.table.bodyWrapper.scrollTop = 0;
        result.list.map((item, index) => {
          item.index = index;
          item.isShow = false;
        });
        that.lists = result.list;
        console.log("list", that.lists);
        that.loading = false;
      } catch (e) {
        that.loading = false;
      }
    },

    // 新增充值
    async handleCharge() {
      const that = this
      this.dialogloading = false;
      this.dialogTitle = '新增充值';      
      this.dialogVisible = true;
    },
    // 充值到账
    async handleRechargeConfirm(row) {
      const that = this
      this.dialogloading = false;
      this.dialogTitle = '充值到账';      
      this.dialogConfirmVisible = true;
      this.rechargeConfirmForm.id = row.id;

      if(row.payment_type != 'USDT'){
        this.rechargeConfirmForm.score = row.amout;
      }
      this.rechargeConfirmForm.payment_type = row.payment_type_label;
      this.rechargeConfirmForm.amout = row.amout;
    },
    // 取消充值
    async handleRechargeCancel(row) {
      const that = this
      this.dialogloading = false;
      this.dialogTitle = '取消充值';      
      this.dialogCancelVisible = true;
      this.rechargeCancelForm.id = row.id;
      this.rechargeCancelForm.payment_type = row.payment_type_label;
      this.rechargeCancelForm.amout = row.amout;
    },
    
    // 提交充值
    handleChargeSubmit() {
      const that = this;
      that.$refs.manuForm.validate(async (v) => {
        if (!v) {
          return false;
        }
   
        try {
          that.dialogloading = true;
          const { result } = await that.$.recharge.rechargeSubmit(that.rechargeForm);
          that.dialogloading = false;
          that.dialogVisible = false;
          that.dialogConfirmVisible = false;
          that.dialogCancelVisible = false;          
          that.diaAddress = false;
          that.$message({ type: "success", message: "新增充值成功" });
          that.handleSearch();
          // 清空 rechargeForm 的项目值
          that.rechargeForm.user_id = '';
          that.rechargeForm.username = '';
          that.rechargeForm.amont = '';
          that.rechargeForm.score = '';
          that.rechargeForm.payment_type = '';
          that.rechargeForm.payment_content = '';          
        } catch (e) {
          that.dialogloading = false;
        }
      });
    },
    
    // 提交确认充值
    handleChargeConfirmSubmit() {
      const that = this;
      that.$refs.manuForm.validate(async (v) => {
        if (!v) {
          return false;
        }
   
        try {
          that.dialogloading = true;
          const { result } = await that.$.recharge.rechargeConfirmSubmit(that.rechargeConfirmForm);
          that.dialogloading = false;
          that.dialogVisible = false;
          that.dialogConfirmVisible = false;
          that.dialogCancelVisible = false;          
          that.diaAddress = false;
          that.$message({ type: "success", message: "充值成功" });
          that.handleSearch();
          // 清空 rechargeConfirmForm 的项目值
          that.rechargeConfirmForm.id = '';
          that.rechargeConfirmForm.user_id = '';
          that.rechargeConfirmForm.payment_type = '';
          that.rechargeConfirmForm.amout = '';
          that.rechargeConfirmForm.score = '';
          that.rechargeConfirmForm.remark = '';          
          that.rechargeConfirmForm.password = '';          
        } catch (e) {
          that.dialogloading = false;
        }
      });
    },
    
    // 取消充值
    handleChargeCancelSubmit() {
      const that = this;
      that.$refs.manuForm.validate(async (v) => {
        if (!v) {
          return false;
        }
   
        try {
          that.dialogloading = true;
          const { result } = await that.$.recharge.rechargeCancelSubmit(that.rechargeCancelForm);
          that.dialogloading = false;
          that.dialogVisible = false;
          that.dialogConfirmVisible = false;
          that.dialogCancelVisible = false;          
          that.diaAddress = false;
          that.$message({ type: "success", message: "取消成功" });
          that.handleSearch();
          // 清空 rechargeCancelForm 的项目值
          that.rechargeCancelForm.id = '';
          that.rechargeCancelForm.user_id = '';
          that.rechargeCancelForm.remark = '';     
          that.rechargeCancelForm.payment_type = '';
          that.rechargeCancelForm.amout = '';
          that.rechargeCancelForm.password = '';         
        } catch (e) {
          that.dialogloading = false;
        }
      });
    },

    handleSelect() {
      this.currentPage = 1;
      this.handleRequest();
    },
  },
};
</script>

<style lang="scss" scoped>
.inp1 {
  flex: 1;
  margin-right: 12px;
}

.supname {
  margin: -18px 0 0 12px;
}

.label {
  font-size: 13px;
  margin-right: 5px;
}
</style>
<style>
/* .add-dialog .el-form-item__content {
  display: flex;
  align-items: center;
} */
.add-dialog .edit-tips {
  color: #c0c4cc;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  padding-top: 2px;
  top: 100%;
  left: 0;
}
.add-dialog .dev-tips {
  color: #c0c4cc;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  top: 100%;
  left: 0;
}
.add-dialog .copy-btn {
  margin-left: 24px;
}
</style>